<template>
  <div class="banner3">
    <div class="view-banner">
      <img src="@/static/img/layout/home_banner2.png"/>
    </div>
    <div class="siteinfo mt-10">
      <v-row class="text-center" justify="center">
        <v-col class="justify-md-end justify-center d-flex" cols="6">
          <div class="signup d-flex align-center">
            <img src="@/static/img/icon/user2.png"/>
            <div class="num">
              <p>已注册用户</p>
              <div class="text-h4">227268</div>
            </div>
          </div>
        </v-col>

        <v-col class="justify-md-start justify-center d-flex" cols="6">
          <div class="online d-flex align-center">
            <img src="@/static/img/icon/online2.png"/>
            <div class="num">
              <p>当前在线用户</p>
              <div class="text-h4">999</div>
            </div>
          </div>
        </v-col>
      </v-row>
    </div>
    <h1>领略不一样的饰品购物体验</h1>
    <div class="signup-btn" @click="login=true">立即登录</div>
    <login-dialog v-model="login"/>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import LoginDialog from "@/components/login/Index.vue";

export default defineComponent({
  components: {LoginDialog},
  setup() {
    const state = reactive({
      login: false
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.banner3 {
  h1 {
    text-align: center;
    font-size: 3.3rem;
    color: #fff;
    margin: 1rem 0;
  }

  .view-banner {
    width: 100%;
    box-sizing: border-box;
    padding: 0;

    img {
      transform: scale(1.2) translateY(6rem);
      width: 100%;
      margin: 0 auto;
      transform-origin: bottom;
    }
  }

  .siteinfo {
    img {
      width: 50px;
      height: 50px;
    }

    .num {
      margin-left: 1rem;

      h1 {
        margin-top: 0 !important;
        font-size: 44px;
      }

      p {
        color: #9d9d9d;
        margin-top: 0;
        margin-bottom: 0;
      }
    }

  }

  .signup-btn {
    cursor: pointer;
    width: 170px;
    height: 53px;
    background: #7668cb;
    border: 1px solid #4f5175;
    border-radius: 8px;
    margin: 2rem auto;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    line-height: 53px;

    &:hover {
      background-color: #9b8dee;
    }
  }
}
</style>
